在上一個單元學習到了如何控制按鈕按下去所產生的事件,有了製作按鈕的經驗之後,在網頁上最常使用的輸入方式就是表單,也是在開發上最容易遇到的需求。
第一個最常使用的表單就是 input
,先宣告一個 input
:
<template>
<input type="text" />
</template>
要讓這個表單與 Vue3 的邏輯產生連結,會需要宣告一個變數,且型別是字串:
<script>
export default {
name: 'App',
data() {
return {
name: '',
};
},
};
</script>
這裡宣告了一個變數 name,初始值是空白。而要讓變數 name 與 input
產生連結,需要使用 v-model
來產生綁定,就是關聯這兩個部分:
<template>
<input type="text" v-model="name" />
</template>
使用 v-model
並且給予變數 name,就可以讓 name 與 input
綁定起來。
最後再把 name 顯示出來即可:
<template>
{{ name }} <br />
<input type="text" v-model="name" />
</template>
<script>
export default {
name: 'App',
data() {
return {
name: '',
};
},
};
</script>
當直接開啟網頁時,在 input
輸入框,輸入文字時,神奇的事情發生了,name 會自動顯示其 input
內容的值,而這個就是 v-model
所綁定的效果。
而除了使用 v-model
來進行變數綁定之外,Vue3 也針對了 v-model
提供額外的邏輯判斷。
例如 v-model.trim
可以去除前後空白:
<template>
{{ name }} <br />
<input type="text" v-model.trim="name" />
</template>
<script>
export default {
name: 'App',
data() {
return {
name: '',
};
},
};
</script>
v-model.lazy
可以在輸入完畢才會將內容儲存起來,換句話說就是將游標跳出,input
輸入框才會將值寫入到變數內:
<template>
{{ name }} <br />
<input type="text" v-model.lazy="name" />
</template>
<script>
export default {
name: 'App',
data() {
return {
name: '',
};
},
};
</script>
v-once
可以防止顯示的變數被更改,但其實只是不顯示被更新的值而已:
<template>
<p v-once>{{ message }}</p>
<br />
<input type="text" v-model="message" />
</template>
<script>
export default {
name: 'App',
data() {
return {
message: 'Hello',
};
},
};
</script>
v-pre
可以完全顯示標籤的內容,也就是在 <p></p>
裡面是什麼內容就顯示什麼內容:
<template>
<p v-pre>{{ name }}</p>
<br />
<input type="text" v-model="name" />
</template>
<script>
export default {
name: 'App',
data() {
return {
name: '',
};
},
};
</script>
以上這個例子就會顯示:
{{ name }}
當然表單還有許多的控制選項可以使用,例如下拉式選單、checkbox ...等,這些將會在下一個單元繼續討論。
前端開發不會只有 Vue3.js 的工具要學習,還必須要學習如何網頁排版,這裡推薦從今日開始接收的另外一個挑戰:
這兩個挑戰,最後幾個單元會相連起來,變成一個共同思路的學習方式。
Vue3 - 從零開始學 - Day8 - [完]